import React from 'react'
import './index.css'
export default function Header({todoList,setTodoList}) {

const onKeyUpChaneg = (e)=>{ 

    if(e.keyCode === 13){
        const onKeyUpVaule = e.target.value.trim()
        //    { id: "001", todo: "唱", done: false },
        const newTodo = { id: Date.now(), todo:onKeyUpVaule , done: false }
        //如果 onKeyUpVaule是false 就不执行下一步
        if(!onKeyUpVaule) return

        setTodoList([newTodo,...todoList])
        //添加完成后数据为空
        e.target.value=''
    }


}
  return (  
    <div className="todo-header">
        <input type="text" onKeyUp={onKeyUpChaneg} placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  )
}
